<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body class="qt-bj buryit">

<br>
<br>
<br>
 <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
   <div class="ur container">
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui teal image header">
           <div class="content">
             用户登录
           </div>
         </h2>


         <form class="ui large form" method="post" action="#" th:action="@{/yhAdmin/login}"><!-- 点击登录就会弹到登陆页面 -->
           <div class="ui  segment">
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="username" placeholder="账号">
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" name="password" placeholder="密码">
               </div>
             </div>
             <button class="ui fluid large teal submit button">登   录</button>
             <br>
             <a class="ui fluid large teal submit button" th:href="@{/yhAdmin/registers}">注   册</a>
           </div>



           <!-- 非空验证（当没有输入用户和密码就显示提示） -->
           <div class="ui error mini message"></div>
           <!-- 用户名和密码错误显示的页面 -->
           <!-- th:unless判断相当于if -->
           <!-- negative变成红色错误背景 -->
           <div class="ui mini negative message" th:text="${message}" th:if="${not #strings.isEmpty(message)}">用户名和密码错误</div>


         </form>


       </div>
     </div>
   </div>
 </div>




<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>

  //非空验证
  $('.ui.form').form({
    fields: {
      username: {
        identifier: 'username',//input的name值是什么，如果没有输入就会弹出下面的提示信息
        rules: [{
          type: 'empty',
          prompt: '请输入用户名'
        }]
      },
      password: {
        identifier: 'password',//input的name值是什么，如果没有输入就会弹出下面的提示信息
        rules: [{
          type: 'empty',
          prompt: '请输入密码'
        }]
      }
    }
  });
</script>



</body>
</html>